import React, { useState, useEffect } from 'react';
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
import { message, Card } from 'antd';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'assets/css/bpmn.css';
import { inquiryProcess } from 'services/process';

export default function DeprecatedProcessViewer({ processId, name }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    inquiryProcess({ params: { processId } })
      .then((data) => {
        setLoading(false);
        const viewer = new BpmnViewer({
          container: '#deprecated',
        });
        viewer.importXML(data.bpmn, (err) => {
          if (err) {
            message.error('error rendering', err);
          }
        });
      });
  }, [processId]);

  return (
    <Card style={{ margin: '20px' }} hoverable title={name} loading={loading}>
      <div id="deprecated" style={{ height: '350px', marginBottom: '20px' }} />
    </Card>
  );
}
